<template>
    <view class="content">
        <view class="bg-view"></view>
        <!-- 客户基本信息 -->
        <view class="info-cont">
            <view class="inner">
                <view class="head">
                    <view class="left">

                        <!-- <image class="img" src="../../static/images/icon_head.png" mode="aspectFill"></image> -->
                        <text class="text">{{item.customerName}}</text>

                    </view>
                    <view class="btn-box">
                        <!-- <view class="deal-btn deal">成交</view> -->

                        <dropdown v-if="customerUserId==undefined" :list="list" @onClick="dropDownChange"></dropdown>
                    </view>
                </view>

                <view class="msg-box">
                    <view class="left">

                        <view class="left">
                            <view class="item">
                                <text
                                    class="text">业务类型:{{utils.getDictLabelName("customerType",item.customerType)}}</text>
                            </view>
                        </view>

                        <view class="left">
                            <view class="item">
                                <text class="text">客户编码:{{item.createNum}}
                                </text>
                            </view>
                        </view>

                        <view class="left">
                            <view class="item fhc fwb">
                                <text class="text"
                                    :class="['sc1','sc2','sc3'][item.cirStatus]">流转状态:{{['流转中','未促成','已促成'][item.cirStatus]}}</text>
                                <view class="ccBtn fc cf" v-if="item.cirStatus==0&&!o.isGhkh" @click="setcirStatus(1)">
                                    设为未促成</view>
                                <view class="ccBtn fc cf"
                                    v-if="item.cirStatus==1&&(role=='总经理'||role=='董事长')&&!o.isGhkh"
                                    @click="setcirStatus(0)">设为流转中
                                </view>
                            </view>
                        </view>

                        <view class="left" v-if="item.cirStatus==1">
                            <view class="item">
                                <text class="text">未促成原因:{{item.cirRemark}}</text>
                            </view>
                        </view>

                        <view class="left">
                            <view class="item">
                                <text v-if="customerUserId==undefined" class="text">
                                    客户状态:{{utils.getDictLabelName("customerReceive",item.isReceive)}}
                                </text>

                                <text v-if="customerUserId!=undefined&&item.customerUser!=null" class="text">
                                    客户状态:{{utils.getDictLabelName("customerUserStatus",item.customerUser.status)}}
                                </text>
                            </view>
                        </view>
                        <view class="item" v-if="item.customerUser">
                            <text class="text">业务员:{{item.customerUser.userNickName||'未分配'}}</text>
                        </view>
                        <view class="item" v-if="item.customerUser">
                            <text class="text">客服:{{item.customerUser.postNickName||'未分配'}}</text>
                        </view>
						<view class="item" v-if="item.customerUser">
						    <text class="text">创建人:{{item.customerUser.createUserName||'未分配'}}</text>
						</view>
<!--                        <view class="item" v-if="item.customerUser">
                            <text class="text">执行:{{item.customerUser.impNickName||'未分配'}}</text>
                        </view> -->



                        <view class="item">
                            <text class="text">
                                审核状态:{{['审核中','审核成功','审核失败','未审核'][item.approvalStatus]}}
                            </text>
                        </view>
                        <view class="item" v-if="item.approvalStatus==2">
                            <text class="text">失败原因:{{item.remark}}</text>
                        </view>

                        <view class="item">
                            <!-- 	<image class="img" src="../../static/images/icon_phone.png" mode="aspectFill"></image> -->
                            <text class="text">最后跟进时间:{{item.receiveTime}}</text>
                        </view>

                    </view>
                    <!-- 打电话 -->
                    <image class="right" src="../../static/images/icon_phone_call.png" mode="aspectFill"
                        @click="callPhone(item.mobile)"></image>
                </view>
                <!--  v-if="customerUserId!=undefined&&item.customerUser!=null&&item.customerUser.status==0&&currentUser.userId==item.customerUser.auditUserId" -->
                <view class="hand-box"
                    v-if="(role=='业务主管'||role=='董事长') && item.approvalStatus!=1 && item.approvalStatus!=3 && item.cirStatus!=1&&!o.isGhkh">
                    <view class="btn adopt" @click="toExam(1)">
                        <image class="img" src="../../static/images/icon_tg_white.png" mode="aspectFill"></image>
                        通过
                    </view>
                    <view class="btn refuse" @click="toExam(2)">
                        <image class="img" src="../../static/images/icon_jj.png" mode="aspectFill"></image>
                        拒绝
                    </view>
                </view>
                <view class="hand-box"
                    v-if="(role=='业务主管'||role=='董事长') &&item.customerUser&& !item.customerUser.userNickName && item.cirStatus!=1&&!o.isGhkh">
                    <view class="btn adopt" @click="setStaff(1)">
                        <image class="img" src="../../static/images/icon_tg_white.png" mode="aspectFill"></image>
                        分配业务员
                    </view>
                </view>
                <view class="hand-box" v-if="['总经理','董事长'].includes(role)&&o.isGhkh&&!item.customerUser.userNickName">
                    <view class="btn adopt" @click="setStaff(1)">
                        <image class="img" src="../../static/images/icon_tg_white.png" mode="aspectFill"></image>
                        分配业务员
                    </view>
                </view>

                <!--  -->
                <view class="hand-box" v-if="uid==item.customerUser.userId&&item.approvalStatus==3&&!o.isGhkh">
                    <view class="btn adopt" @click="tjsh(1)">
                        <image class="img" src="../../static/images/icon_tg_white.png" mode="aspectFill"></image>
                        提交审核
                    </view>
                </view>

                <view class="hand-box"
                    v-if="role=='贷后主管' &&item.customerUser&& !item.customerUser.postNickName && item.cirStatus!=1&&!o.isGhkh">
                    <view class="btn adopt" @click="setStaff(2)">
                        <image class="img" src="../../static/images/icon_tg_white.png" mode="aspectFill"></image>
                        分配贷后
                    </view>
                </view>

               <!-- <view class="hand-box" v-if="
                    role=='执行主管' && 
                    item.customerUser&&!item.customerUser.impNickName && item.cirStatus!=1
                    &&item.handingMethod!=1
                    &&!o.isGhkh"> -->
                    <!--item.handingMethod==1时为垫资不需要执行 -->
                    <!-- <view class=" btn adopt" @click="setStaff(3)">
                        <image class="img" src="../../static/images/icon_tg_white.png" mode="aspectFill"></image>
                        分配执行
                    </view>
                </view> -->

            </view>
        </view>
        <!-- 活动记录、基本信息、相关信息切换 -->
        <scroll-view scroll-x class="nav text-center" v-if="!o.isGhkh">
            <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabArr" :key="index"
                @tap="tabSelect" :data-id="index">
                {{item}}
            </view>
        </scroll-view>



        <!-- 基本信息 -->
        <essent-info ref="customerInfo" v-show="TabCur===0"></essent-info>


        <!-- 相关信息 -->
        <!-- <relat-info ref="contactInfo" v-show="TabCur===2"></relat-info> -->
        <!-- 征信与合同信息 -->
        <view v-show="TabCur===1" class="zxyhtBox">
            <view class="titleBox">征信</view>
            <view class="zwsj" v-if="!inv|| inv.length==0">暂无数据</view>
            <view class="zwsj" v-if="inv && !Array.isArray(inv)">{{inv}}</view>
            <view class="zxBox">
                <block v-if="inv&&inv.length&&Array.isArray(inv)">
                    <image v-for="i,j of inv" @click="showImg(inv,j)" :src="i.docUrl" class="img" mode="widthFix">
                    </image>
                </block>
            </view>
            <view class="titleBox">合同</view>
            <view class="zwsj" v-if="!contract ||contract.length==0 ">暂无数据</view>
            <view class="zxBox">
                <view v-if="contract&&!Array.isArray(contract)">{{contract}}</view>

                <block v-if="contract&&contract.length&&Array.isArray(contract)">
                    <image v-for="i,j of contract" @click="showImg(contract,j)" :src="i.contractUrl" class="img"
                        mode="widthFix">
                    </image>
                </block>
            </view>

            <!-- <view class="btn" @click="to(`/pages/customer/addinvfile?type=上传征信`)">上传征信</view> -->
            <!-- 征信与合同页 -->
            <!-- 
             role=='' 
             业务 item.customerUser.userId
             贷后客服 item.customerUser.postpersonId 
             执行 item.customerUser.executorId
             -->
            <view v-if="item.customerUser && item.cirStatus!=1">
                <view class="footBox"
                    v-if="(uid==item.customerUser.postpersonId&&[3,4,5,6].includes(item.customerUser.status-0))">
                    <view class="seat"></view>

                    <!-- 3上传 4拒传 -->
                    <view class="foot"
                        v-if="uid==item.customerUser.postpersonId&&[3,4].includes(item.customerUser.status-0)">
                        <view class="btn" v-if="[3,4].includes(item.customerUser.status-0)"
                            @click="to(`/pages/customer/addinvfile?type=上传征信`)">上传征信</view>
                        <view class="btn" v-if="[3].includes(item.customerUser.status-0)"
                            @click="to(`/pages/customer/examine2?type=拒传征信`)">拒传征信</view>
                    </view>

                    <!-- 5上传 6拒签 -->
                    <view class="foot"
                        v-if="uid==item.customerUser.postpersonId&&[5,6].includes(item.customerUser.status-0)">
                        <view class="btn" v-if="[5,6].includes(item.customerUser.status-0)"
                            @click="to(`/pages/customer/addcusfile?type=上传合同`)">上传合同</view>
                        <view class="btn" v-if="[5].includes(item.customerUser.status-0)"
                            @click="to(`/pages/customer/examine2?type=拒签合同`)">拒签合同</view>
                    </view>
                </view>
            </view>



        </view>
        <!-- 活动记录 -->
        <activ-rec ref="visitInfo" v-show="TabCur===2"></activ-rec>

        <view class="mask fc" v-if="showWccPop" @click="showWccPop = 0">
            <view class="pop" @click.stop="showWccPop = 1">
                <view class="tc mb40">请输入未促成原因</view>
                <textarea v-model="wccReason" placeholder="请输入" class="mb40 bgf5 p30 br16 w_100"></textarea>
                <view class="ccBtn boxc fc cf ptb20" @click.stop="subWccReason">确定</view>
            </view>
        </view>


        <u-picker :show="showStaff" :columns="staff" keyName="name" @confirm="selectStaff"
            @cancel="showStaff= false"></u-picker>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    import activRec from './cusActivRec.vue'
    import essentInfo from './cusEssentInfo.vue'
    import relatInfo from './cusRelatInfo.vue'
    export default {
        components: {
            activRec, // 活动记录
            essentInfo, // 基本信息
            relatInfo // 相关信息
        },
        data() {
            return {
                showWccPop: 0,
                wccReason: '',
                list: [],
                currentUser: {},
                customerId: undefined,
                customerUserId: undefined,
                item: {},
                TabCur: 0, // 当前选中tab
                scrollLeft: 0,
                tabArr: ['基本信息', '征信与合同', '跟进记录'],
                role: '',
                staff: '', //员工列表
                active_staff: '', //选中的员工
                showStaff: false, //显示员工列表
                contract: '', //合同
                inv: '', //征信
                uid: '',
                o: '',
            }
        },
        onLoad(options) {
            this.o = options
            this.customerId = options.customerId;
            this.customerUserId = options.customerUserId;
            this.uid = JSON.parse(this.getS('user')).userId
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
            this.currentUser = JSON.parse(uni.getStorageSync('user'));
            //如果有权限，显示
            if (this.utils.hasPermi("crm:customer:receive")) {
                this.list.push("认领");
            }
            if (this.utils.hasPermi("crm:customer:recover")) {
                this.list.push("回收");
            }
            if (this.utils.hasPermi("crm:customer:assign")) {
                this.list.push("分配");
            }
        },
        onShow() {
            this.getCustomerDetails()
            this.role = this.getS('role')
        },
        methods: {
            showImg(urls, current, ) {
                console.log(6789, urls);
                urls = urls.map(i => {
                    return i.docUrl || i.contractUrl
                })
                console.log(678, urls);
                uni.previewImage({
                    urls,
                    current,
                });
            },
            subWccReason() {
                if (!this.wccReason) return this.toast(`请输入未促成理由`)
                this.showWccPop = 0
                let r = this.wccReason
                this.wccReason = ''
                this.setcirStatus(1, r)
            },
            async setcirStatus(s, reason) { //1 未促成 0流转中
                if (s == 1 && !reason) {
                    return this.showWccPop = 1
                }
                if (s == 1) {
                    console.log(33, reason);
                    api.cirRecover({
                        customerId: this.item.customerId,
                        refuse: reason
                    }).then(r => {
                        this.toast(`操作成功`)
                        setTimeout(_ => {
                            this.getCustomerDetails()
                        }, 800)
                    })
                } else if (s == 0) {
                    api.reCir({
                        customerId: this.item.customerId,
                    }).then(r => {
                        this.toast(`操作成功`)
                        setTimeout(_ => {
                            this.getCustomerDetails()
                        }, 800)
                    })
                }
                this.item.setcirStatus = s

            },
            tjsh() {
                //提交审核
                api.approval({
                    customerId: this.item.customerId,
                    approvalStatus: 0,
                }).then(res => {
                    if (res.code == 200) {
                        this.toast('提交成功')
                        this.item.approvalStatus = 0
                        console.log(this.item.approvalStatus);
                        this.$forceUpdate()
                    } else {
                        this.toast(res.msg)
                    }
                })
            },
            async setStaff(type) { //分配员工 1 业务 2贷后 3执行
                //获取员工列表
                let staff
                if (!this.o.isGhkh) staff = await api.getDeptUsers()
                if (this.o.isGhkh) staff = await api.getSalesUsers() //管理员
                this.staff = [
                    staff.userList.map(i => {
                        return {
                            id: i.userId,
                            name: i.nickName //userName
                        }
                    })
                ]
                this.showStaff = true
                console.log('员工列表', this.staff);
            },
            async selectStaff(e) {
                console.log(e);
                let userId = e.value[0].id
                let data = {
                    customerId: this.item.customerId,
                    userId
                }
                if (this.o.isGhkh) {
                    data = {
                        customerId: this.item.customerId,
                        userId
                    }
                }
                let res
                if (this.role == '业务主管' || this.role == "董事长") res = await api.toSalePerson(data)
                if (this.role == '贷后主管') res = await api.toPostPerson(data)
                if (this.role == '执行主管') res = await api.toExecutor(data)
                if (['总经理', '董事长'].includes(this.role)) res = await api.changeOutUser(data)


                console.log(666, res);
                if (res.code == 200) {
                    //分配接口
                    this.showStaff = false
                    this.staff = ''
                    this.active_staff = ''
                    if (this.role == '业务主管' || this.role == '董事长') this.item.customerUser.userNickName = e.value[0]
                        .name
                    if (this.role == '贷后主管') this.item.customerUser.postNickName = e.value[0].name
                    if (this.role == '执行主管') this.item.customerUser.impNickName = e.value[0].name
                    if (['总经理', '董事长'].includes(this.role)) this.item.customerUser.userNickName = e.value[0].name
                    this.toast(`分配成功`)
                } else {
                    this.toast(res.msg)
                }
            },
            dropDownChange(val) {
                console.log(val)
                if (val == "认领") {
                    this.receive()
                } else if (val == "回收") {
                    this.recover()
                } else if (val == "分配") {
                    this.assign()
                }
            },
            //审核
            toExam(auditStatus) {
                uni.navigateTo({
                    url: './examine?customerUserId=' + this.customerId + '&isAudit=' + auditStatus
                })
            },
            //https://blog.csdn.net/qq_42453562/article/details/107691316 导航
            getCustomerDetails() {
                var data;
                if (this.customerUserId != undefined && this.customerUserId > 0) {
                    data = { customerId: this.customerId, customerUserId: this.customerUserId };
                } else {
                    data = { customerId: this.customerId };
                }
                var that = this;
                api.getCustomerDetails(data).then(
                    res => {
                        if (res.code == 200) {
                            this.item = res.data;
                            this.item.cirStatus = res.data.customerUser.cirStatus
                            this.item.cirRemark = res.data.customerUser.cirRemark
                            this.item.createNum = res.data.customerUser.createNum
                            this.item.deposit = res.data.customerUser.deposit
                            this.item.serCharge = res.data.customerUser.serCharge
                            this.item.feeStatus = res.data.customerUser.feeStatus

                            this.setS(`activeCustomerDetail`, this.item);
                            // this.$refs.customerInfo.getCustomerDetails(this.item);
                            //获取征信信息
                            this.getInv()
                            //获取合同信息
                            this.getcontract()
                            // 获取执行信息
                            this.getImp()


                            //认领状态
                            var status = 0;
                            if (this.item.customerUser != null) {
                                status = this.item.customerUser.status;
                            }

                            // this.$refs.contactInfo.getCustomerContactsList(this.item.customerId, this
                            //     .customerUserId, status);
                            this.$refs.visitInfo.getCustomerVisit(this.item.customerId, this.customerUserId,
                                status);
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });

                        }
                    },
                    rej => {}
                );
            },
            getImp() { //执行
                api.getOneImp({
                    customerId: this.item.customerId
                }).then(r => {
                    r = r.data
                    let res = r
                    this.item.imp = r
                    this.item.impId = r.impId //执行id
                    this.setS(`activeCustomerDetail`, this.item)
                    this.$refs.customerInfo.getCustomerDetails(this.item);
                })
            },
            getInv() { //征信
                api.getOneInv({
                    // customerId: this.item.customerId, 
                    crmCustomerId: this.item.customerId
                }).then(r => {
                    r = r.data
                    let res = r
                    this.item.crmCreInvId = r.crmCreInvId //征信id
                    this.setS(`activeCustomerDetail`, this.item)
                    this.$refs.customerInfo.getCustomerDetails(this.item);


                    if (this.item.crmCreInvId) {
                        api.getInvList({
                            crmCreInvId: this.item.crmCreInvId,
                            pageSize: 9999,
                            pageNum: 1
                        }).then(r => {
                            console.log('征信', r);
                            this.inv = r.rows // '' '不传征信' '拒传征信' 征信图片
                            if (r.rows.length == 0 && res.creInvStr) this.inv = '不传征信原因:' + res
                                .creInvStr
                            if (r.rows.length) {
                                this.inv = this.inv.filter(i => i.docUrl)
                                this.item.invArr = r.rows
                                console.log('征信图片', this.item);
                                this.setS(`activeCustomerDetail`, this.item)
                                this.$refs.customerInfo.getCustomerDetails(this.item);
                            }
                        })

                    }
                })
            },
            getcontract() { //合同
                api.getOneContract({ customerId: this.item.customerId, customer_id: this.item.customerId }).then(r => {

                    this.item.customerContractId = r.data.customerContractId //合同id
                    this.setS(`activeCustomerDetail`, this.item)
                    this.$refs.customerInfo.getCustomerDetails(this.item);
                    let res = r
                    if (this.item.customerContractId) {
                        api.getContractList({
                            customerContractId: this.item.customerContractId,
                            pageSize: 9999,
                            pageNum: 1
                        }).then(r => {
                            console.log('合同', r);
                            this.contract = r.rows // '' '拒传合同' 合同图片
                            if (r.rows.length == 0 && res.creInvStr) {
                                this.contract = '不传合同原因:' + res
                                    .creInvStr
                            }
                            if (r.rows.length) {
                                this.contract = this.contract.filter(i => i.contractUrl)
                                this.item.contractArr = r.rows
                                this.setS(`activeCustomerDetail`, this.item)
                                this.$refs.customerInfo.getCustomerDetails(this.item);
                            }
                        })
                    }
                })
            },
            updateVisitCount(count) {
                this.tabArr[2] = "跟进记录(" + count + ")"
            },
            receive() {
                var that = this;
                if (this.item.isReceive == 1) {
                    uni.showToast({
                        icon: 'none',
                        title: "此客户已被认领",
                    });
                    return;
                }
                uni.showModal({
                    title: '提示',
                    content: '确定认领' + that.item.customerName + '吗',
                    success: function(res) {
                        if (res.confirm) {
                            var data = { customerId: that.item.customerId };
                            api.receive(data).then(
                                res => {
                                    if (res.code == 200) {
                                        uni.showToast({
                                            title: '认领成功,等待审核',
                                            duration: 2000
                                        });
                                        that.getCustomerDetails();

                                    } else {
                                        uni.showToast({
                                            icon: 'none',
                                            title: res.msg,
                                        });

                                    }
                                },
                                rej => {}
                            );
                        } else if (res.cancel) {}
                    }
                });


            },
            recover() {
                var that = this;
                uni.showModal({
                    title: '提示',
                    content: '确定回收' + that.item.customerName + '吗',
                    success: function(res) {
                        if (res.confirm) {
                            var data = { customerId: that.item.customerId };
                            api.recover(data).then(
                                res => {
                                    if (res.code == 200) {
                                        uni.showToast({
                                            title: '回收成功',
                                            duration: 2000
                                        });
                                        that.getCustomerDetails();

                                    } else {
                                        uni.showToast({
                                            icon: 'none',
                                            title: res.msg,
                                        });

                                    }
                                },
                                rej => {}
                            );
                        } else if (res.cancel) {}
                    }
                });


            },
            assign() {

                uni.navigateTo({
                    url: './assign?customerId=' + this.customerId
                })

            },
            // 拨打电话
            callPhone(tel) {
                uni.makePhoneCall({
                    phoneNumber: tel
                })
            },
            // tab切换
            tabSelect(e) {
                this.TabCur = e.currentTarget.dataset.id;
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
            }
        }
    }
</script>

<style scoped lang="scss">
    .content {
        padding: 20upx 0;
        position: relative;

        .bg-view {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 160upx;
            background: #39b54a;
        }

        .info-cont {
            padding: 0 50upx;
            margin-bottom: 30upx;

            .inner {
                padding: 30upx;
                background: #fff;
                border-radius: 10upx;

                .head {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .left {
                        display: flex;
                        align-items: center;

                        .img {

                            width: 50upx;
                            height: 50upx;
                            margin-right: 20upx;
                        }

                        .text {

                            font-size: 32upx;
                            color: #000;
                            // overflow: hidden;
                            // text-overflow:ellipsis;
                            // white-space: nowrap;
                        }
                    }

                    .btn-box {
                        .deal-btn {
                            text-align: center;
                            padding: 10upx;
                            font-size: 24upx;
                            border-radius: 4upx;

                            &.deal {
                                background: #0aAC44;
                                color: #fff;
                            }

                            &.un-deal {
                                background: #EFEFEF;
                                color: #BDBDBD;
                            }
                        }
                    }
                }

                .msg-box {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20upx;

                    .left {
                        .item {
                            display: flex;
                            align-items: center;
                            margin-top: 20upx;

                            .img {
                                width: 30upx;
                                height: 30upx;
                                margin-right: 10upx;
                            }

                            .text {
                                font-size: 30upx;
                                color: #333;
                            }
                        }
                    }

                    .right {
                        width: 60upx;
                        height: 60upx;
                        align-self: flex-end;
                    }
                }

                .hand-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-top: 1px solid #f7f7f7;
                    padding: 20upx 0;

                    .btn {
                        width: 47%;
                        height: 80upx;
                        line-height: 80upx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 28upx;
                        color: #fff;
                        border-radius: 8upx;

                        &.adopt {
                            background: #2EB76F;
                        }

                        &.refuse {
                            background: #F75759;
                        }

                        .img {
                            width: 30upx;
                            height: 30upx;
                            margin-right: 20upx;
                        }
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .mescroll-uni mescroll-uni-fixed {
        margin-top: 200upx;
    }

    .cu-item {
        position: relative;
    }

    .editBox {
        position: absolute;
        right: 0;
        top: 0;
    }

    .edit {
        color: red;
        font-size: 28rpx;
        margin-left: 16rpx;
    }

    .footBox {
        .seat {
            height: 100rpx;
        }

        .foot {
            height: 100rpx;
            width: 750rpx;
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16rpx;
            flex: 1;

            .btn {
                min-width: 300rpx;
                margin: 0 16rpx;
                height: 68rpx;
                border-radius: 60rpx;
                background-color: #2EB76F;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
            }
        }
    }

    .zxyhtBox {
        padding: 0 50rpx;

        .titleBox {
            margin: 24rpx 0;
            font-weight: 800;
        }

        .zwsj {
            text-align: center;
            padding: 80rpx 0;
        }

        .zxBox {
            display: flex;
            flex-wrap: wrap;
            gap: 24rpx;
            text-align: center;

            .img {
                width: 312rpx;
            }
        }
    }

    .FixedFoot {
        position: fixed;
        width: 750rpx;
        height: 150rpx;
        bottom: 0;
        left: 0;
        z-index: 9999999999999;

        .btn {
            width: 690rpx;
            height: 80rpx;
            border-radius: 8rpx;
            color: #fff;
        }
    }
</style>